<template>
<div class="swiper">
      <Swipe class="header-swiper" :autoplay="3000" lazy-render >
        <!-- v-for="image in images" :key="image" -->
        <Swipe-item class="swiperItem" v-for="image in swipersData" :key="image.id" >
          <!-- :src="image" -->
          <img
            class="simg"
            :src="image.picUrl"
            style="width: 100%; height: 148px"
          />
        </Swipe-item>
      </Swipe>
    </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"
  
  export default defineComponent({
    name:'indexSwiper',
  })
</script>

<script lang="ts" setup>
import { Swipe, SwipeItem  } from 'vant';
import { useCountStore } from '@/stores/home';
import {onMounted} from 'vue'
import { storeToRefs } from 'pinia';
const countStore = useCountStore()
const {swipersData} = storeToRefs(countStore)
function getSwiperList(){
   countStore.getHomeList()
}
onMounted(()=>{
  getSwiperList()
})
</script>

<style scoped>
.searchIcon {
  position: absolute;
  color: #666;
  left: 13px;
  top: 8px;
  z-index: 2;
}

  .swiper .swiperItem .simg{
    width: 100%;
    height: 148px; 
  }
</style>